<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery-1.8.0.js"></script>
	<script type="text/javascript"  src="js/jquery.raty.min.js"></script>
    <script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script class="resources library" src="js/area.js" type="text/javascript"></script>
	<title>服务项目下单页面</title>
</head>
<body>
	<div class="wrap">
        <div class="main" id="home">
        	<!-- 新闻中心页头 -->
        	<div id="header">
        		<div class="header_top">
        			<div class="common_width clearfix">
        				<p class="header_title">您好，欢迎您来到安徽智慧乐生活家政管理有限公司！ 您身边的家政服务专家！</p>
        				<div class="loginbar"><a href="#">登录</a>  |  <a href="#">注册</a>  |  我的预约</div>
        			</div>
        		</div>
        		<div class="nav common_width clearfix">
        			<img src="imgs/logo.gif" alt="智慧乐" class="logo_img">
        			<div class="nav_title">
        				<ul class="clearfix">
	        				<li><a href="">首页</a></li>
	        				<li><a href="">新闻中心</a></li>
	        				<li><a href="">服务项目</a></li>
	        				<li><a href="">积分商城</a></li>
	        				<li><a href="">培训学院</a></li>
	        				<li><a href="">招商加盟</a></li>
	        				<li><a href="">联系我们</a></li>
        				</ul>
        			</div>
        			<div class="pre_order">
        				<a href="">立即下单</a><a href="">快速预约</a>
        			</div>
        		</div>
        	</div>
        	<div class="hr_10"></div>
			<div class="common_width common_item">
				<a href="">首页</a> <em>></em> 会员中心
			</div>
			<div class="common_width">
				<h3 class="shop_list">商品列表</h3>
				<table class="shop_table">
					<tr>
						<th width="116">类型</th>
						<th width="240">商品名称</th>
						<th width="90">数量</th>
						<th width="150">金额</th>
						<th width="266">商品属性</th>
						<th width="138">操作</th>
					</tr>
					<tr>
						<td>家庭保洁</td>
						<td class="clearfix">
							<div class="shop_order_img"></div>
							<h2 class="shop_order_title">无忧保洁A1</h2>
						</td>
						<td>1</td>
						<td>￥119</td>
						<td class="attribute">
							<dl>
								<dt>卡类型：</dt>
								<dd>虚卡（电子卡号密码）</dd>
								<dt>上门时间：</dt>
								<dd>下午14:00-18:00</dd>
								<dt>服务时间：</dt>
								<dd>2016-07-27</dd>
								<dt>服务地区：</dt>
								<dd>合肥</dd>
							</dl>
						</td>
						<td class="stuff">加入收藏夹</td>
					</tr>
				</table>
				<form action="" class="clearfix">
					<h3 class="shop_list customer_list">商品列表</h3>
					<div class="service_info">
						<div class="customer">
							<div class="customer_label clearfix">
								<label for="">房屋面积：</label>
								<input type="text" class="customer_square">
								<span class="square">平方米</span>
							</div>
							<div class="customer_add clearfix">
								<label for="">收货地址：</label>
								<div class="mall_text ">
									<div class="mall_text_p mall_text_chosen clearfix">
										<p>梨花 13855826546    安徽  合肥  蜀山区  西湖国际广场</p>
										<a href="">修改地址</a>
									</div>
									<a href="" class="mall_manage">管理我的收货地址</a>
								</div>
							</div>
						</div>
						<h3 class="shop_list">优惠券</h3>
						<div class="coupon_info">
							<div class="coupon_label clearfix">
								<label for="">优惠券券号：</label>
								<input type="text" class="customer_square">
							</div>
							<p class="coupon_text">此订单可以使用优惠劵，若无优惠劵，则可不填。</p>
						</div>
						<h3 class="shop_list">付款类型</h3>
						<div class="payment">
							<h4 class="online">在线支付</h4>
							<ul class="payment_type clearfix">
								<li class="payment_li payment_li_bg">支付宝支付</li>
								<li class="payment_li">微信支付</li>
								<li class="payment_li">余额支付</li>
							</ul>
							<p class="payment_text">亲爱的用户，您需要使用<span>￥119元 </span>支付次订单。</p>
						</div>
						<h3 class="shop_list">其他信息</h3>
						<div class="else">
							<div class="coupon_label clearfix">
								<label for="">优惠券券号：</label>
								<input type="text" class="customer_square">
							</div>
						</div>
					</div>
					<div class="explain clearfix">
						<div class="explain_info clearfix">
							<input type="checkbox" id="check">
							<label for="check">我已阅读并同意<a href="">《家政服务购买协议》</a></label>
						</div>
						<button>提交订单</button>
					</div>
				</form>
			</div>
        </div>
        <div class="hr_76"></div>
    </div>
    <div id="footer">
    	<div class="common_width footer">
    		<div class="hr_23"></div>
    		<form action="" class="footer_nav">
    			<table border="0">
					<tr>
						<th>家庭服务</th>
						<th>家政师</th>
						<th>培训学院</th>
						<th>个人中心</th>
						<th>加入我们</th>
					</tr>
					<tr>
						<td><a href="">家庭保洁</a></td>
						<td><a href="">月嫂</a></td>
						<td><a href="">学院简介</a></td>
						<td><a href="">我的订单</a></td>
						<td><a href="">招商加盟</a></td>
					</tr>
					<tr>
						<td><a href="">家居保养</a></td>
						<td><a href="">育婴师</a></td>
						<td><a href="">培训课程</a></td>
						<td><a href="">我的积分</a></td>
						<td><a href="">培训课程</a></td>
					</tr>
					<tr>
						<td><a href="">家电清洗</a></td>
						<td><a href="">催乳师</a></td>
						<td><a href="">学院相册</a></td>
						<td><a href="">家政预约</a></td>
						<td><a href="">服务方式</a></td>
					</tr>
					<tr>
						<td><a href="">家居洗涤</a></td>
						<td><a href="">早教师</a></td>
						<td><a href="">学院相册</a></td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td><a href="">养老陪护</a></td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
						<td><a href="">居家保姆</a></td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
				</table>
    		</form>
    		<div class="qr_code">
    			<img src="imgs/qr_code.gif" alt="">
    			<p>扫一扫</p>
    		</div>
    	</div>
    </div>

<script>
	// 支付方式
	$('.payment_type li').click(function() {
		$(this).addClass('payment_li_bg').removeClass('payment_li');
		$(this).siblings('.payment_type li').removeClass('payment_li_bg').addClass('payment_li');
	})
	// 商品分类侧导航
	$(function(){
		$('.subNav').click(function() {
			$(this).toggleClass('sub_active');
			$(this).children('span').toggleClass('nav-title');
			$(this).siblings('.subNav').children('span').removeClass('nav-title');

			$(this).children('span').toggleClass('nav_active');
			$(this).siblings('.subNav').children('span').removeClass('nav_active');

			$(this).siblings('.subNav').removeClass('sub_active');
			$(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(500);
		});

		$('.navContent li').click(function() {
			$(this).addClass('sub_active').children('a').addClass('nav_shop_active').removeClass('nav_shop');
			$(this).siblings('li').removeClass('sub_active').children('a').removeClass('nav_shop_active').addClass('nav_shop');
		});

	})
</script>
</body>
</html>